<template>
  <section class="product">
    <header class="header">

      <h3 class="title text-overflow">
        <a target="_blank"
           class="title-product"
           :href="`${product.shopDomain}/kcDetails/${product.goodsId}`"
        >
          <span v-html="product.title" :title="product.title | htmlTag" class="product-name text-overflow"></span>
        </a>
      </h3>
    </header>

    <div class="product-content">
      <ul class="product-info">
        <li>
          <span class="key">品位(%)：</span>
          <span class="value text-overflow" :title="product.goodsAttr.grade | htmlTag"
                v-html="`${product.goodsAttr.grade}`"></span>
        </li>

        <li>
          <span class="key">产地：</span>
          <span class="value text-overflow" :title="product.goodsAttr.producingPlace | htmlTag"
                v-html="product.goodsAttr.producingPlace"></span>
        </li>

        <li>
          <span class="key">交货地：</span>
          <span class="value text-overflow" :title="product.goodsAttr.deliveryPoint | htmlTag"
                v-html="product.goodsAttr.deliveryPoint"></span>
        </li>

        <li>
          <span class="key">数量：</span>
          <span class="value text-overflow" :title="`${product.totalStock + product.measure}`">
            {{ product.totalStock }} {{ product.measure }}
          </span>
        </li>


        <li>
          <span class="key">供应商：</span>
          <span class="value text-primay-hover text-overflow">
            <a :href="`${product.shopDomain}`"
               target="_blank"
               class="text-primay-hover"
               :title="product.companyName | htmlTag"
               v-html="product.companyName"></a>
          </span>
        </li>
        <li>
          <span class="key">截止时间：</span>
          <span class="value text-overflow" :title="product.goodsAttr.expireDate">
            {{product.goodsAttr.expireDate }}
          </span>
        </li>

        <li>
          <span class="key"></span>
          <span class="value">
            <el-tooltip
              v-if="product.userLevelCode > 1"
              popper-class="icon-tooltip"
              placement="top"
              trigger="hover"
              :content="({2:'黄金会员', 3:'铂金会员'})[product.userLevelCode]">
              <i class="icon" :class="`icon-vip${product.userLevelCode}`"></i>
            </el-tooltip>

            <el-tooltip
              popper-class="icon-tooltip"
              placement="top"
              trigger="hover"
              v-if="product.validStatus  === 2"
              content="已认证">
              <i class="icon icon-auth"></i>
            </el-tooltip>
          </span>
        </li>
      </ul>

      <div class="btns">


        <p class="price" v-if="product.isPhonePrice === 1 || product.minPrice === '-4008600550'">电议</p>
        <p class="price" v-else>￥{{ product.minPrice }}元/{{ product.measure }}</p>


        <a class="buy" :href="`${product.shopDomain}/kcDetails/${product.goodsId}`" target="_blank">立即采购</a>
        <button class="add" @click="addCart(product)">加入采购单</button>

        <p class="login-info" v-if="!user.userId">
          <a :href="centerAddress" class="text-primay" @click.prevent="showLogin()">登录</a>后可查看联系方式
        </p>

        <p class="login-info" v-if="user.userId">
          <span class="user-name text-overflow" :title="product.contact"><i
            class="icon icon-user"></i>{{ product.contact }}</span>
          <span class="user-contact text-overflow" :title="product.contactNumber"><i class="icon icon-phone-colour"></i>{{ product.contactNumber
            }}</span>
        </p>
      </div>
    </div>

    <!--加入采购单弹窗-->
    <div class="addshopDialog" v-show="addDialog">
      <div class="dialogMain" v-show="succ">
        <div class="dialogtitle">
          <span>添加成功</span>
          <div class="dialogClose" @click="close_addDialog">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="dialogContainer">
          <div class="dialogInfo">
            <i class="iconinfo el-icon-check"></i>
            <div class="infoFt">商品已成功添加到采购单</div>
          </div>
          <div class="thatNumberInfo">当前采购单共 <span class="thatNum ft_active">{{addnum}}</span> 种货品</div>
          <div class="dialogGroup">
            <a class="dialogbtn godiff"
               target="_blank"
               :href="`${platform.CONSTANT_SHOPPING_CART_URL}/shoppingCart?backUrl=${platform.CONSTANT_JUMORE_YUN_URL}`
">去结算</a>
            <div class="andshoop" @click="close_addDialog">继续购物</div>
          </div>
        </div>
      </div>
      <div class="dialogMain" v-show="!succ">
        <div class="dialogtitle">
          <span>添加失败</span>
          <div class="dialogClose" @click="close_addDialog">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="dialogContainer errorInfo">
          <div class="dialogInfo">
            <i class="iconinfo el-icon-check"></i>
            <div class="infoFt">{{descInfoDialog}}</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  import address from '~/config'
  import axios from '~/plugins/axios'
  import platform from '~/config/platform'

  export default {
    props: {
      product: {
        type: Object,
        'default' () {
          return {
            goodsAttr: {}
          }
        }
      }
    },

    data () {
      return {
        // 添加到购物车的反馈
        addDialog: false,
        platform: platform,
        succ: true,
        descInfoDialog: '',
        addnum: 0,
        centerAddress: address.CENTER_ADDRESS
      }
    },

    methods: {
      // 关闭弹出的添加购物车
      close_addDialog () {
        this.addDialog = false
      },
      /**
       * 添加到购物车
       */
      addCart (product) {
        if (!this.user.userId) {
          this.showLogin()
          return
        }

        axios.post('/cart', {
          goodsId: product.itemId,
          num: 1
        }).then(data => {
          if (data.data.code === 0) {
            axios.get('/cart/cartNum').then(data => {
              // 添加商品采购弹窗
              this.addDialog = true
              // 成功或失败显示的不同块
              this.succ = true
              this.addnum = data.data.data
            })
          } else {
            this.descInfoDialog = data.data.desc

            // 添加商品采购弹窗
            this.addDialog = true

            // 成功或失败显示的不同块
            this.succ = false
          }
        })
      },

      // 显示登陆窗口
      showLogin (url) {
        // 显示登录框
        if (url) {
          this.$store.commit('SET_OPEN', {opend: true, openurl: url})
        } else {
          this.$store.commit('SET_OPEN', {opend: true})
        }
      }
    },
    computed: {
      user () {
        return this.$store.state.user.user
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../element-variables";

  .product {
    background-color: #fff;
    padding: 20px 30px;
    border: 1px solid #dedede;

    &:hover {
      border-color: $--color-primary;
    }

    .title {
      font-size: 16px;
      color: #3e3e3e;
      font-weight: normal;
      padding-bottom: 10px;
    }

    .manufactor {
      padding-right: 20px;
    }

    .title-product:hover {
      color: $--color-primary;
    }

    .product-name {
      display: inline-block;
      vertical-align: text-bottom;
      max-width: 600px;
    }
  }

  .price {
    color: $--color-primary;
    font-size: 16px;
    text-align: center;
    padding-bottom: 20px;
  }

  .product-content {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .product-info {
    width: 800px;

    li {
      width: 50%;
      float: left;
      line-height: 30px;
    }

    .key {
      width: 70px;
      float: left;
      color: #9e9e9e;
    }

    .value {
      padding-right: 10px;
      color: #3e3e3e;
      display: block;
    }
  }

  .btns {
    width: 300px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

  %btn {
    width: 120px;
    height: 34px;
    border: 1px solid $--color-primary;
    border-radius: 2px;
    text-align: center;
    display: inline-block;
  }

  .buy {
    @extend %btn;
    background-color: #E8AF68;
    color: #fff;
    line-height: 34px;
    border-color: #E8AF68;

    &:hover {
      background-color: rgba(#E8AF68, .8);
    }
  }

  .add {
    @extend %btn;
    margin-left: 10px;
    background-color: #fff;
    color: $--color-primary;

    &:hover {
      background-color: rgba($--color-primary, .8);
      color: #fff;
    }
  }

  .login-info {
    padding-top: 10px;
    color: #6e6e6e;

    .icon {
      margin-right: 10px;
      position: relative;
      top: -2px;
    }
  }

  .user-contact {
    width: 50%;
    text-align: center;
    display: inline-block;
  }

  .user-name {
    padding-right: 30px;
    @extend .user-contact;
  }

  /*添加商品采购单弹窗*/
  .addshopDialog {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: rgba(0, 0, 0, .1);
    z-index: 9999
  }

  .dialogMain {
    width: 607px;
    /*height:247px;*/
    min-height: 140px;
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    margin: -123px 0px 0px -303px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
  }

  .dialogtitle {
    width: 90%;
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e4e4e4;
    text-indent: 17px;
    position: relative;
    font-size: 13px;
  }

  .dialogClose {
    position: absolute;
    top: 12px;
    right: 0px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-indent: 0px;
    text-align: center;
    cursor: pointer;
  }

  .dialogContainer {
    text-align: center;
    padding-bottom: 20px;
  }

  .dialogInfo {
    width: 90%;
    margin: 0 auto;
  }

  .iconinfo, .infoFt {
    vertical-align: middle;
    display: inline-block;
  }

  .iconinfo {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #13ce66;
    line-height: 30px;
    color: #fff;
    margin: 20px 0px;
  }

  .errorInfo {
    .iconinfo {
      background: #ff4949
    }
  }

  .infoFt {
    padding-left: 6px;
  }

  .thatNumberInfo {
    color: #6e6e6e;
    margin-bottom: 20px;
  }

  .dialogGroup {
    width: 325px;
    margin: 0 auto;
  }

  .dialogbtn {
    display: inline-block;
    margin: 0px 10px 0 0;
    vertical-align: top;
    background: #fff;
    border: 1px solid #d32f2f;
    background: #d32f2f;
    color: #fff;
    padding: 5px 10px;
    &:hover {
      cursor: pointer;
      opacity: .8
    }
  }

  .andshoop {
    background: #fff;
    border: 1px solid #dedede;
    color: #343434;
    padding: 5px 10px;
    display: inline-block;
    &:hover {
      cursor: pointer;
      color: #f64f38;
      border: 1px solid #f64f38;
    }
  }

</style>
